<template>
  <div class="search-show">
    <el-container>
      <el-header class="search-header">
        <div class="searIbx">
          <el-button class="btn-back" @click="goBack">
            <i class="fa fa-chevron-left fa-lg"></i>
          </el-button>
          <el-input type="textarea" class="in-searInp" :placeholder="queryPrompt" :disabled="true"></el-input>
          <el-button type="primary" class="in-searEnt" @click="getList">
            <i class="fa fa-search"></i>搜索</el-button>
        </div>
      </el-header>
      <div class="tags-search-group">
        <span class="search-title">标签选择:</span>
        <div v-for="tag in searchTagsList" :key="tag.id" class="tag-search">
          <el-checkbox v-model="tag.isChecked"></el-checkbox>
          <span @click="tag.isChecked=!tag.isChecked">{{tag.displayname}}</span>
        </div>
      </div>
      <el-main class="search-content">
        <el-tabs v-model="activeName" @tab-click="tabClickHandler">
          <el-tab-pane v-for="tab in tabsList" :label="`${tab.val}(${tab.count})`" :name="tab.key" :key="tab.key"></el-tab-pane>
        </el-tabs>
        <el-container>
          <el-row>
            <!--左侧菜单树-->
            <el-col :span="17" :offset="1">
              <!--表格-->
              <object-table :tableData="tableData" @jumpToObjShow="jumpToObjShow" @handlerClick="viewObjectInfo" :loading="loading" v-on:openSetTagsDialog="openSetTagsDialog" v-on:openSetGroupDialog="openSetGroupDialog" @showProperty="showProperty" style="margin-top:10px;"></object-table>
              <el-button type="" plain size="mini" @click="checkedAll" style="margin-top:5px" v-show="tableData.length!=0">全选</el-button>
              <el-button size='mini' type="primary" @click="openSetTagsSelObj" plain v-show="tableData.length!=0">设置标签</el-button>
              <el-button size='mini' type="primary" @click="openSetGroupSelObj" plain v-show="tableData.length!=0">移动到分组</el-button>
              <el-pagination style="margin-top:16px;" background layout="prev, next,total" :current-page="page" :page-size="page_size" @current-change="handlerChangePage" @size-change="handlerChangeSize" :total="dataCount">
              </el-pagination>
            </el-col>
            <el-col :span="5" :offset="1" class="property">
              <div class="property-header">详细信息</div>
              <div v-for="item in propertyList" :key="item.propertyUri">
                <span class="property-name">{{item.propertyName}}:</span>
                <div v-if="item.propertyType == 'TimeInterval'">
                  <p v-for="itemValue in item.propertyValues">
                    <span>{{itemValue.value.timeStart}} - {{itemValue.value.timeEnd}}</span>
                  </p>
                </div>
                <div v-else-if="item.propertyType == 'GisData'">
                  <p v-for="itemValue in item.propertyValues">
                    <span>{{itemValue.value.address}} , {{itemValue.value.longitude}} , {{itemValue.value.latitude}}</span>
                  </p>
                </div>
                <div v-else>
                  <p v-for="itemValue in item.propertyValues">
                    <span>{{itemValue.value}}</span>
                  </p>
                </div>
              </div>
              <el-button size='mini' type="primary" plain @click="jumpToObjShow2" v-show="propertyList.length!=0" class="openObjShowBtn">查看详情</el-button>
            </el-col>
          </el-row>
        </el-container>
      </el-main>
    </el-container>
    <!-- 设置标签模态框 -->
    <tag-management ref="tagManagement" :parseTagsList='parseTagsList' @markTags='markTags' @getTags='getTags'></tag-management>
    <!-- 设置分组模态框 -->
    <el-dialog title="分组设置" :visible.sync="groupDialogVisible" width="40%">
      <subscribegroup-tree :groupObjs="groupObjs" :type="type" ref="subscribegroupTree" v-on:closeDialog="closeDialog"></subscribegroup-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="groupDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="markGroup">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import InputTag from "vue-input-tag";
import ObjectTable from "./object-table.vue";
import AssociationInfo from "./association_info.vue";
import util from "@/utils";
import mapUtil from "@/utils/mapUtil";
import subscribegroupTree from "./subscribegroup-tree.vue";
import tagManagement from "./tag-management.vue";
import Cookies from "js-cookie";
import {
  searchGroupFullTextCount,
  getAdvancedSearchCount,
  getAssociationAttr,
  getAdvancedSearchList,
  getRelationInfo,
  tagsSave,
  getTags,
  getBizGroupEnum
} from "@/api/search";
import { getdetail } from "@/api/relationFraph";
export default {
  data() {
    return {
      page: 1,
      totalCount: 0,
      // 实体总条数
      entityCount: 0,
      // 文档总条数
      documentCount: 0,
      // 事件总条数
      eventCount: 0,
      // 多媒体条数
      mediaCount: 0,
      // 每页条数
      page_size: 10,
      // 搜索关键字
      // searchVal: '',
      keyWords: [],
      enterType: "All",
      // 类型
      type: "",
      // objectList: [],
      // 对象
      defaultProps: {
        children: "children",
        label: "displayname"
      },
      expandAll_flag: true,
      // 左侧菜单树数据
      treeData: [],
      // 表格数据
      tableData: [],
      loading: true,
      isShowObj: false,
      // 图标,名称
      objectInfo: {},
      // 相关属性
      association_Attr: [],
      // 相关事件
      association_Event: [],
      // 相关实体
      association_Entity: [],
      // 相关文档
      association_Doc: [],
      // 相关多媒体
      association_Media: [],
      mapReloadData: [],
      // 事件loading标识符
      event_loading: false,
      // 实体loading标识符
      entity_loading: false,
      // 文档loading标识符
      document_loading: false,
      // 多媒体loading标识符
      media_loading: false,
      // 属性loading标识符
      attr_loading: false,
      tagsList: [],
      parseTagsList: [],
      searchTagsList: [],
      addTagName: "",
      addtagspopover: false,
      // 饼状图数据
      pieData: [],
      // 柱状图
      barData: [],
      // 饼图objList
      pieObjectList: [],
      // 柱状图objlist
      barObjectList: [],
      // tab栏数据
      // tabsList: [],
      activeName: "socialaccount",
      tabKey: "",
      selectedData: {},
      isSelectedObj: false,
      groupDialogVisible: false,
      groupObjs: [], // 传给分组的数据,
      showEcharts: false,
      propertyList: [], // 详情获取属性值,
      searchTableData: {},
      objectList: [],
      dataCount: 0,
      belongGroup: ""
    };
  },
  components: {
    ObjectTable,
    AssociationInfo,
    InputTag,
    subscribegroupTree,
    tagManagement
  },
  computed: {
    tabsList: function() {
      let a = [];
      let group = {
        socialaccount: "实体",
        socialdynamic: "事件",
        keyfigures: "重点人物",
        focusgroup: "重点组织",
        document: "文档",
        media: "多媒体"
      };
      let b = {
        val: group[this.belongGroup],
        count: this.dataCount
      };
      a.push(b);
      return a;
    },
    queryPrompt() {
      let prompt = "";
      this.objectList.forEach(item => {
        prompt += item.objectName + ":";
        item.conditions.forEach(condition => {
          if (condition.propertyType === "GisData") {
            if (condition.comparison === "%") {
              prompt +=
                condition.displayname +
                condition.comparison +
                condition.address +
                condition.comparison +
                "，";
            } else {
              prompt +=
                condition.displayname +
                condition.comparison +
                condition.address +
                "，";
            }
          } else if (condition.propertyType === "TimeInterval") {
            prompt +=
              condition.displayname +
              ">=" +
              util.timestampToTime(condition.timeStart) +
              ";" +
              condition.displayname +
              "<=" +
              util.timestampToTime(condition.timeEnd) +
              "，";
          } else if (condition.propertyType === "DateTime") {
            prompt +=
              condition.displayname +
              condition.comparison +
              util.timestampToTime(condition.value) +
              "，";
          } else {
            if (condition.comparison === "%") {
              prompt +=
                condition.displayname +
                condition.comparison +
                condition.value +
                condition.comparison +
                "，";
            } else {
              prompt +=
                condition.displayname +
                condition.comparison +
                condition.value +
                "，";
            }
          }
        });
        prompt += item.tags.join(",");
      });
      return prompt;
    },
    rowkeyList: function() {
      let a = [];
      this.tableData.forEach(item => {
        if (item.isChecked) {
          a.push({ rowkey: item.rowkey, objecturi: item.objecturi });
        }
      });
      return a;
    },
    rowkeyObjList: function() {
      let a = [];
      this.tableData.forEach(item => {
        if (item.isChecked) {
          a.push({ rowkey: item.rowkey, objecturi: item.objectUri });
        }
      });
      return a;
    },
    tagsCheckedList: {
      get: function() {
        let a = [];
        this.parseTagsList.forEach(item => {
          if (item.isChecked) a.push(item.displayname);
        });
        return a;
      },
      set: function() {}
    },
    searchTagsCheckedList: function() {
      let a = [];
      this.searchTagsList.forEach(item => {
        if (item.isChecked) a.push(item.displayname);
      });
      return a;
    }
  },
  watch: {
    parseTagsList: function() {
      this.tagsCheckedList = [];
      this.parseTagsList.forEach(item => {
        if (item.isChecked) this.tagsCheckedList.push(item.displayname);
      });
    }
  },
  created() {
    // 接收搜索页面传递的参数
    let queryCriteria = JSON.parse(Cookies.get("queryCriteria"));
    // this.enterType = queryCriteria.enterType
    this.belongGroup = queryCriteria.belongGroup;
    this.type = queryCriteria.type;
    this.objectList = queryCriteria.objectList;
    this.$nextTick(() => {
      this.checkdKeys = this.objectList.map(item => item.objectUri);
    });
  },
  mounted() {
    // this.getBizGroupEnum()
    this.getList();
    this.getTags();
    window.onresize = util.debounce(this.resizeHandler, 200);
  },
  methods: {
    querySearch(queryString, cb) {
      let parseTagsList = this.parseTagsList;
      let results = queryString
        ? parseTagsList.filter(this.createFilter(queryString))
        : parseTagsList;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    async getListCount(params) {
      this.dataCount = await getAdvancedSearchCount(params);
    },
    // 获取All列表
    async getList(countFlag) {
      this.tableData = [];
      this.loading = true;
      // 搜索条件
      let params = {
        curpage: this.page,
        persize: this.page_size,
        objectType: this.belongGroup,
        tags: this.searchTagsCheckedList
      };
      let objectList = this.objectList;
      if (objectList != "" && objectList.length > 0) {
        params.list = objectList;
      }
      this.getListCount(params);
      if (countFlag) {
      }
      let list = await getAdvancedSearchList(params);
      list.forEach(v => {
        if (v.personIconUrl) {
          v.iconUrl = v.personIconUrl;
        }
      });
      this.loading = false;
      // 过滤属性
      this.tableData = _.map(list, item => {
        item.isChecked = false;
        if (item.tags == null) {
          item.tags = [];
        }
        if (!util.isEmpty(item.showName)) {
          item.displayName = item.showName;
        }
        return item;
      });
    },
    // tab切换
    tabClickHandler(tab) {
      this.tabKey = tab.name;
      this.type = tab.name;
      this.page = 1;
      this.getList(false);
    },
    // 当前页改变时会触发
    handlerChangePage(val) {
      this.page = val;
      this.getList(false);
    },
    // 每页条数改变时会触发
    handlerChangeSize(val) {
      this.page_size = val;
      this.getList(false);
    },
    checkedAll() {
      let hasCheckedAll = true;
      this.tableData.forEach(item => {
        if (!item.isChecked) hasCheckedAll = false;
        item.isChecked = true;
      });
      if (hasCheckedAll) {
        this.tableData.forEach(item => {
          item.isChecked = false;
        });
      }
    },
    // 列表数据点击事件
    handlerClick(
      objectType,
      objectUri,
      rowKey,
      name,
      displayName,
      icon,
      isAddToMap
    ) {
      this.event_loading = true;
      this.entity_loading = true;
      this.document_loading = true;
      this.media_loading = true;
      this.attr_loading = true;
      this.isShowObj = false;
      this.objectInfo = {
        objectType: objectType,
        icon: icon,
        name: name,
        displayName: displayName,
        objectUri: objectUri,
        rowKey: rowKey
      };
      this.association_Attr = [];
      // 获取相关属性
      getAssociationAttr({ rowkey: rowKey, objectUri: objectUri }).then(
        response => {
          this.mapReloadData = [];
          let propertyList = response.data.propertyList;
          propertyList.map((item, index) => {
            let valueStr = "";
            if (item.propertyType === "GisData") {
              item.propertyValues.forEach(element => {
                valueStr +=
                  element.value.address +
                  "," +
                  element.value.longitude +
                  "," +
                  element.value.latitude +
                  ";";
                // 将含有地理属性的对象添加到地图
                if (isAddToMap) {
                  mapUtil.tool.addToMap({
                    longitude: element.value.longitude,
                    latitude: element.value.latitude,
                    rowkey: rowKey,
                    objectUri: objectUri,
                    objectType: objectType,
                    displayName: displayName,
                    name: name,
                    iconUrl: icon
                  });
                  this.mapReloadData.push(item);
                }
              });
            } else if (item.propertyType === "TimeInterval") {
              item.propertyValues.forEach(element => {
                valueStr +=
                  element.value.timeStart + " - " + element.value.timeEnd + ";";
              });
            } else {
              item.propertyValues.forEach(element => {
                valueStr += element.value + ";";
              });
            }
            this.association_Attr.push({
              displayName: item.propertyName,
              value: valueStr.substring(0, valueStr.length - 1)
            });
          });
          this.attr_loading = false;
        }
      );
      // 获取相关事件
      getRelationInfo({
        rowkey: rowKey,
        objectType: "com.scistor.object.event"
      }).then(response => {
        this.association_Event = response.data;
        this.event_loading = false;
      });
      // 相关实体
      getRelationInfo({
        rowkey: rowKey,
        objectType: "com.scistor.object.entity"
      }).then(response => {
        this.association_Entity = response.data;
        this.entity_loading = false;
      });
      // 相关文档
      getRelationInfo({
        rowkey: rowKey,
        objectType: "com.scistor.object.document"
      }).then(response => {
        this.association_Doc = response.data;
        this.document_loading = false;
      });
      // 相关媒体
      getRelationInfo({
        rowkey: rowKey,
        objectType: "com.scistor.object.media"
      }).then(response => {
        this.association_Media = response.data;
        this.media_loading = false;
      });
      if (isAddToMap) {
        if (this.mapReloadData.length === 0) {
          this.$message.error("这条数据没有地理属性");
        }
      }
      this.isShowObj = true;
    },
    renderContent(h, { node, data }) {
      let img;
      if (!util.isEmpty(data.icon)) {
        img = (
          <img
            src={data.icon}
            class="userIcon"
            width="16px"
            height="16px"
            style="border-radius:16px;"
          />
        );
      }
      return (
        <p>
          {img}
          <span style="margin-left:10px;">{node.label}</span>
        </p>
      );
    },
    // 对象查看
    viewObjectInfo(
      objectType,
      instanceUri,
      objectUri,
      name,
      displayName,
      icon,
      belongGroup
    ) {
      let currentUrl = window.location.href;
      currentUrl = currentUrl.split("#")[0];
      currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`;
      window.open(currentUrl, "");
      // if (objectType == 'com.scistor.object.entity') {
      //     currentUrl = `${currentUrl}#/display?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`
      //     window.open(currentUrl, '')
      // } else {
      //     currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`
      //     window.open(currentUrl, '')
      // }
    },
    jumpToObjShow(
      objectType,
      instanceUri,
      objectUri,
      name,
      displayName,
      icon,
      belongGroup
    ) {
      let currentUrl = window.location.href;
      currentUrl = currentUrl.split("#")[0];
      currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`;
      window.open(currentUrl, "");
    },
    jumpToObjShow2() {
      let data = this.searchTableData;
      let objectType = data.objectType;
      let instanceUri = data.rowkey;
      let objectUri = data.objectUri;
      let name = data.name;
      let displayName = data.displayName;
      let icon = data.iconUrl;
      let belongGroup = data.belongGroup;
      let currentUrl = window.location.href;
      currentUrl = currentUrl.split("#")[0];
      currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`;
      window.open(currentUrl, "");
    },
    goBack() {
      this.$router.push({
        path: "/advanced-search"
      });
    },
    openSetTagsDialog(data) {
      this.isSelectedObj = false;
      this.selectedData = data;
      this.parseTagsList.forEach(item => {
        item.isChecked = false;
      });
      this.$nextTick(() => {
        this.$refs.tagManagement.tagsDialogVisible = true;
      });
    },
    openSetGroupDialog(data) {
      this.selectedData = data;
      let params = {
        objectUri: data.objectUri,
        rowkey: data.rowkey
      };
      this.groupObjs = [];
      this.groupObjs.push(params);
      this.groupDialogVisible = true;
    },
    closeDialog() {
      this.groupDialogVisible = false;
    },
    // 全选旁边的设置标签
    openSetTagsSelObj() {
      if (this.rowkeyList.length == 0) {
        this.$message.error("请选择标注对象");
        return;
      }
      this.isSelectedObj = true;
      this.parseTagsList.forEach(item => {
        item.isChecked = false;
      });
      this.$nextTick(() => {
        this.$refs.tagManagement.tagsDialogVisible = true;
      });
    },
    openSetGroupSelObj() {
      if (this.rowkeyList.length == 0) {
        this.$message.error("请选择标注对象");
        return;
      }
      this.groupDialogVisible = true;
      this.groupObjs = this.rowkeyObjList;
    },
    markTags(data) {
      let rowkeyList;
      let params;
      if (data.length === 0) {
        this.$message.error("请选择标签");
        return;
      }
      if (this.isSelectedObj) {
        // 多个设置
        params = {
          tagList: data,
          rowkeyList: this.rowkeyObjList
        };
      } else {
        // 单个设置
        rowkeyList = {
          rowkey: this.selectedData.rowkey,
          objecturi: this.selectedData.objectUri
        };
        params = {
          tagList: data,
          rowkeyList: [rowkeyList]
        };
      }
      tagsSave(params).then(response => {
        this.$refs.tagManagement.tagsDialogVisible = false;
        this.tableData.forEach(item => {
          // 页面展示标签
          for (let el of params.rowkeyList) {
            if (el.rowkey.indexOf(item.rowkey) > -1) {
              this.$message(response.msg);
              item.tags.push(...params.tagList);
              item.tags = util.uniq(item.tags);
            }
          }
        });
      });
    },
    markGroup() {
      this.$refs.subscribegroupTree.chooseGroupTree();
    },
    // 获取tab栏数据
    // getBizGroupEnum () {
    //     getBizGroupEnum().then(response => {
    //         this.tabsList = response.data.slice(0, 1)
    //         this.tabKey = response.data[0].key
    //         this.getList()
    //     })
    // },
    getTags() {
      getTags().then(response => {
        response.data.forEach(item => {
          item.isChecked = false;
        });
        this.parseTagsList = response.data;
        this.parseTagsList.forEach(item => {
          item.value = item.displayname;
        });
        this.searchTagsList = JSON.parse(JSON.stringify(this.parseTagsList));
      });
    },
    showProperty(data) {
      this.searchTableData = data;
      this.getNodeDetails(data.rowkey, data.objectUri);
    },
    // 获取详情
    getNodeDetails(_rowkey, _objectUri) {
      let getdetailObj = {
        rowkey: _rowkey,
        objectUri: _objectUri
      };
      getdetail(getdetailObj).then(res => {
        if (res.status == 200) {
          this.propertyList = res.data.propertyList;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.el-tabs__content {
  height: 0;
}
.search-header {
  padding: 10px 10px;
  .searIbx {
    height: 50px;
    .btn-back {
      float: left;
      height: 40px;
      margin-right: 5px;
      padding: 0 24px;
      background: #fff;
      border: none;
    }
    .in-searInp {
      height: 50px;
      width: 600px;
      float: left;
    }
    .el-input__inner {
      height: 40px;
      line-height: 40px;
      font-size: inherit;
      border: solid 1px #3885d5;
    }
    .in-searEnt {
      margin-left: 20px;
      margin-top: 5px;
      height: 40px;
      float: left;
      padding: 0 24px;
      background-color: #1169c4;
      font-size: 1em;
    }
  }
}
.property {
  margin-top: -45px;
  padding-right: 10px;
  .property-header {
    padding-bottom: 8px;
    border-bottom: 2px solid #e4e7ed;
  }
  .property-name {
    display: block;
    color: #666;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 10px;
  }
  p {
    word-break: break-all;
  }
  .openObjShowBtn {
    margin-top: 20px;
    float: right;
  }
}
.search-show {
  //   position: relative;
  .echarts-box {
    transition: right 0.5s;
    -moz-transition: right 0.5s;
    -webkit-transition: right 0.5s;
    -o-transition: right 0.5s;
    min-height: 1px;
    position: fixed;
    right: 0;
    top: 100px;
    width: 25%;
    border: 1px solid #ccc;
    background: #fff;
    padding: 10px;
    z-index: 100;
    .tool {
      z-index: 100;
      position: absolute;
      top: 0;
      left: -35px;
      width: 35px;
      padding: 10px;
      word-wrap: break-word;
      color: #fff;
      background: #27478d;
      cursor: pointer;
    }
  }
  .transition-class {
    right: -25%;
  }
  .el-row {
    width: 100%;
  }
  .search-header {
    padding: 10px 10px;
    .searIbx {
      height: 50px;
      .btn-back {
        height: 40px;
        margin-right: 5px;
        padding: 0 24px;
        background: #fff;
        border: none;
      }
      .global-search {
        height: 50px;
        width: 120px;
        float: left;
      }
      .in-searInp {
        height: 50px;
        width: 580px;
        float: left;
      }
      .el-input__inner {
        height: 40px;
        line-height: 40px;
        font-size: inherit;
        border: solid 1px #3885d5;
      }

      .in-searEnt {
        height: 40px;
        float: left;
        padding: 0 24px;
        background-color: #1169c4;
        font-size: 1em;
      }
    }
  }
  .search-content {
    padding: 0;
    overflow-x: hidden;
    .left_tree {
      min-height: 1px;
    }
    .el-tabs {
      padding-left: 5%;
      //   margin-bottom: -40px;
      padding-right: 25%;
      border-top: 1px solid #efefef;
      height: 60px;
    }
    .el-tab-pane {
      height: 42px;
      line-height: 42px;
      .icon {
        margin-right: 8px;
      }
    }
    .objRshowBox {
      margin-top: 10px;
      .objBx {
        padding: 10px 15px 10px;
        min-height: 86px;
      }
    }
    .association_Atrr {
      padding-left: 15px;
      max-height: 240px;
      min-height: 40px;
      overflow-y: auto;
    }
    .right-content {
      margin-left: 10px;
      h3 {
        margin-top: 10px;
      }
      .tag-title {
        border-top: 1px solid #eee;
        padding-top: 10px;
      }
      .tag-div {
        float: left;
        margin-right: 25px;
        margin-top: 10px;
        border: 1px solid #e1e1e1;
        padding: 5px 5px 5px 10px;
        border-radius: 5px;
        cursor: pointer;
        .x {
          font-size: 14px;
          color: #999;
          vertical-align: super;
          opacity: 0;
          margin-left: 3px;
        }
      }
      .tag-div:hover .x {
        opacity: 1;
      }
      .x:hover {
        font-weight: bold;
        color: #777;
      }
    }
  }
}
.tags-search-group {
  max-width: 100%;
  max-height: 60px;
  overflow: auto;
  margin-left: 80px;
  margin-right: 80px;
  .search-title {
    font-weight: bold;
  }
  .tag-search {
    display: inline-block;
    margin: 5px;
    cursor: pointer;
  }
}
</style>
<style lang="less">
.vue-input-tag-wrapper {
  width: 580px;
  height: 40px;
  .input-tag {
    padding: 5px;
  }
}
</style>
